<style scoped lang="less">
.new-music {
  max-width: 800px;
  margin: 30px auto 0;
  &__title{
    font-size: 14px;
    color: #141B27;
    cursor: pointer;
    transition: color ease-in-out 300ms;
    &:hover{ color: red }
  }

  &__list{
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    &__item{
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      &__image-box{
        padding: 12px 0;
        width: 65px;
        height: 65px;
        position: relative;
        &__image{
          border-radius: 10px;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        &__play{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgba(20, 27, 39, 0.18);
          backdrop-filter: blur(10px);
          border-radius: 50%;
          &__icon{
            &:hover{
              cursor: pointer;
            }
            width: 15px;
            height: 15px;
            padding: 4px;
          }
        }
      }
      transition: all ease-in-out .3s;
      &:hover > &__image-box{
        transform: scale(1.05);
      }
      &__info{
        flex: 1;
        display: flex;
        flex-flow: nowrap row;
        align-items: center;
        &__index{
          font-weight: 400;
          font-size: 12px;
          color: #999999;
          margin: 0 10px;
        }

        &__right-box{
          display: flex;
          flex-flow: column nowrap;
          justify-content: center;
          align-items: flex-start;

          &__title{
            color: rgb(93,93,93);
            font-size: 14px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 250px;
            &__alias{
              color: #999999;
            }
            &:hover{
              cursor: pointer;
              color: rgb(255,93,93);
            }
            &:hover > &__alias{
              cursor: pointer;
              color: rgb(255,93,93);
            }
          }

          &__sub-title-box{
            display: flex;
            flex-flow: row nowrap;
            margin-top: 4px;
            &__label{
              font-size: 12px;
              color: #999999;
              margin: 0 4px;
              &:hover{
                cursor: pointer;
                color: rgb(255,93,93);
              }
              &:first-child{
                margin: 0;
              }
            }
          }
        }
      }
    }
  }
}
</style>
<template>
  <div class="new-music">
    <div class="new-music__title" @click="netEasyMusicStore.pushRouter('newMusic')">最新音乐 ></div>
    <div class="new-music__list">
      <div class="new-music__list__item" v-for="(ele,index) of listCom" :key="index">
        <!--     图片盒子   -->
        <div class="new-music__list__item__image-box" @click="playMusic(ele)">
          <img :src="ele.imageUrl"  class="new-music__list__item__image-box__image"/>
          <div class="new-music__list__item__image-box__play">
            <img :src="playIcon" class="new-music__list__item__image-box__play__icon">
          </div>
        </div>
        <!--    数据信息    -->
        <div class="new-music__list__item__info">
          <div class="new-music__list__item__info__index">{{ ele.index }}</div>
          <div class="new-music__list__item__info__right-box">
            <div class="new-music__list__item__info__right-box__title" @click="goMusicDetail(ele)">
              {{ ele.title }}
              <span v-if="!!ele.alias" class="new-music__list__item__info__right-box__title__alias">({{ ele.alias }})</span>
            </div>
            <div class="new-music__list__item__info__right-box__sub-title-box">
              <div class="new-music__list__item__info__right-box__sub-title-box__label" @click="goArtDetail(item)" v-for="(item,index) of ele.artists" :key="index">{{ item.title }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
//@ts-ignore
import playIcon from '../../../icon/play-red.png'
import {computed, ref} from "vue";
import netEasyMusicStore from '../../../store'
import { AxiosService } from "@/core";
const axios = new AxiosService('netEasyMusic')
// data
const list = ref([])
const listCom = computed(() => list.value?.map( (ele:any, index:number) => ({
  ...ele,
  index: index + 1 <= 9 ? `0${index + 1}` : index + 1,
  title: ele?.name ?? '-',
  alias: ele?.song?.alias.reduce((total:string,pre:string) => (total + pre),''),
  imageUrl: ele?.picUrl,
  artists: ele?.song?.artists?.map((item:any, index:number) => ({
    ...item,
    title: item?.name ?? '-'
  })) ?? [],
  hasMv: !!ele?.song?.mvid // 是否有mv

})))

// 请求
axios.get({
  api:'/personalized/newsong',
  success: ({result}) => list.value = result
})

// 交互
// 播放音乐
const playMusic = (event:any) => {

}

// 查看歌曲详情
const goMusicDetail = (event:any) => {

}

// 查看艺人
const goArtDetail = (event:any) => {

}
</script>

